import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useRef } from 'react';
import { VersionManageAPI } from '../common/type';
import { history } from 'umi';
import { Form, message } from 'antd';
import { getKeyRouter } from '@/utils';
import MyIcon from '@/components/MyIcon';
import { addVersionService, applyService } from '../services';
export const VersionCheckModal: React.FC<VersionManageAPI.IVersionApplyModal> = ({
  onClose,
  isShowModal, //是否显示modal
  checkRows,
  reloadVersion,
  addOrDetailflag,
}) => {
  const applyModalRef: Ref<IOneModalRef> = useRef(null); //弹框的ref
  const [applyForm] = Form.useForm(); //表单 form

  /* 关闭弹窗 */
  const onCloseModal = () => {
    if (applyModalRef) {
      if (applyModalRef.current) {
        if (applyModalRef.current.onModalCancel) {
          applyModalRef.current.onModalCancel();
        }
      }
    }
  };

  /**
   * 新增编辑回调
   * @param res 接口返回数据
   * @param callType true 为新增回调  || false 为编辑回调
   */
  const updateVersionCallback = (res: any, callType: boolean) => {
    if (res && res?.msgFlag) {
      onCloseModal();
      history.push({
        pathname: `/versionController/getVersionByID/{id}/:${getKeyRouter()}${getKeyRouter()}`,
        state: {
          id: addVersionData?.id,
          delRouterName: history.location.pathname, //必传,要删除的路由名称
        },
      });
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入新增
   */
  const {
    addVersionRun,
    addVersionLoading,
    addVersionData,
  } = addVersionService(updateVersionCallback);

  /**
   * 申请接口回调
   * @param res
   */
  const applyCallBack = (res: any) => {
    if (res && res?.msgFlag) {
      // message.success(res?.msg);
      onCloseModal();
      // reloadVersion();
      if (!addOrDetailflag) {
        history.push({
          pathname: `/versionController/getVersionByID/{id}/:${getKeyRouter()}${getKeyRouter()}`,
          state: {
            id: checkRows?.id,
            delRouterName: history.location.pathname, //必传,要删除的路由名称
          },
        });
      }
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入申请接口
   */
  const { applyIssueRun, applyIssueLoading, applyIssueData } = applyService(
    applyCallBack,
  );

  /**
   * 保存
   */
  const saveCheck = () => {
    /**checkState 审核状态(0：待审核 1：通过 2 驳回 3：作废) */
    /**state 系统版本的状态(0：起草 1：待审核 2：未通过 3：已通过 4：已作废) */
    let updatePayload: any = {};
    if (checkRows?.id) {
      updatePayload['msysVersion'] = {
        id: checkRows?.id,
        versionNum: checkRows?.versionNum,
      };
      updatePayload['applyType'] = '1';
      applyIssueRun(updatePayload);
    } else {
      updatePayload = { ...checkRows };
      updatePayload['applyType'] = '1';
      addVersionRun(updatePayload);
    }
  };

  return (
    <>
      <OneModal
        open={true}
        maskClosable={true} //点击蒙层关闭弹窗 默认true
        getContainer={false}
        ref={applyModalRef}
        title={
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span
              style={{ marginRight: 10, fontSize: '24px', color: '#faad14' }}
            >
              <MyIcon type="icon-info-circle" />
            </span>
            <span>提交审核</span>
          </div>
        }
        width={document.body.clientWidth * 0.3}
        onCancel={onClose}
        bodyStyle={{
          padding: '15px 30px',
        }}
        centered
        onOk={saveCheck}
        confirmLoading={
          // getFlowOrgTreeLoading || getUserLoading || applyIssueLoading
          addVersionLoading || applyIssueLoading
        }
      >
        <div style={{ fontSize: '18px', color: '#ff000d' }}>
          确认提交审核吗？
        </div>
        {/* <Spin
          spinning={getFlowOrgTreeLoading || getUserLoading || applyIssueLoading}
        >
          <div className={pageStyles['fromView-styles']}>
            <Form labelAlign="right" form={applyForm}>
              <Row>
                <Col span={24}>
                  <Form.Item
                    label="审核岗位"
                    name="checkPositionID"
                    rules={[
                      {
                        required: true,
                        message: '请选择审核岗位',
                      },
                    ]}
                  >
                    <TreeSelect
                      placeholder="请选择审核岗位"
                      showSearch
                      allowClear
                      treeNodeFilterProp={'searchtitle'}
                      treeData={orgTreeData(getFlowOrgList)}
                      onSelect={onTreeSelect}
                      loading={getFlowOrgTreeLoading}
                    />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item
                    label="审核人"
                    name="checkerID"
                    rules={[
                      {
                        required: true,
                        message: '请选择审核人',
                      },
                    ]}
                  >
                    <Select
                      placeholder="请选择审核人"
                      loading={getUserLoading}
                      allowClear
                      showSearch
                      optionFilterProp={'searchtitle'}
                      disabled={getUserLoading}
                    >
                      {getUserList && getUserList?.length > 0 ? (
                        <>
                          {getUserList?.map((item: any) => {
                            return (
                              <Select.Option
                                disabled={
                                  item?.id == getUserID() ? true : false
                                }
                                value={item?.id}
                                key={item?.id}
                                searchtitle={item?.realName}
                              >
                                <MyIcon
                                  style={{ marginRight: 5 }}
                                  type="icon-lianxiren"
                                />
                                {item?.realName}
                              </Select.Option>
                            );
                          })}
                        </>
                      ) : (
                        <></>
                      )}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="备注" name="remark">
                    <Input.TextArea
                      placeholder={`请输入备注`}
                      showCount
                      maxLength={200}
                      autoSize={{ minRows: 2, maxRows: 4 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </div>
        </Spin> */}
      </OneModal>
    </>
  );
};
